<template>
  <div id="car_detail_container" >
    <headTop :headTitle="encodeURI('汽车详情')" :toHome="'true'"/>
    <div class="banner "><carrousel :banners="productBanners"/></div>
    <div class="detail_des  clearFloat">
      <div class="left fl">
        <div class="ks">{{result.title}}</div>
        <div class="des_des">
          {{result.detail}}
        </div>
        <div class="link">
          <a href="javascript:;">中东</a>
          <a href="javascript:;">现车</a>
          <a href="javascript:;">高配</a>
        </div>
      </div>
      <div class="fr goods_price">库存：{{result.count}}</div>
      <div class="company_name">{{result.des}}</div>
      <div class="right fr">价格：<em>{{result.price| currency('￥')}}</em></div>
    </div>
    <!-- 分期方案 -->
    <div class="zdetail_cont4">
      <div class="cont4_tit">请选择商品配置</div>
      <div class="cont4_det" >
        <label  v-for="(item,index) in radios" :key="item.id">
          <span class="radio" :class="{'on':item.isChecked}">{{item.label}}</span>
          <input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked'  @click="check(index)" type="radio">
        </label>

      </div>
    </div>
    <!-- 分期数 -->
    <div class="zdetail_cont4">
      <div class="cont4_tit">请选择商品颜色</div>
      <div class="cont4_det">
        <label  v-for="(item,index) in radiosColor" :key="item.id">
          <span class="radio" :class="{'on':item.isChecked}">{{item.label}}</span>
          <input v-model="radio" :value="item.value" class="input-radio" :checked='item.isChecked'  @click="checkColor(index)" type="radio">
        </label>
      </div>
    </div>
    <div class="zdetail_cont2">
      提示：该报价仅限未限购号牌城市
    </div>
    <div class="zdetail_cont5">
      <div class="cont5_tit">评价（143223条）</div>
    </div>
    <div class="detail_comments">
      <div class="assess-flat" v-for="item in result.productEvaluates" :key="item.id">
        <div class="assess-top">
					<span class="user-portrait">
						<img :src="item.head_img" >
					</span>
          <span class="user-name">{{item.name}}</span>
          <span class="vip-icon vip-gold-icon"></span>
          <span class="assess-date">{{item.createtime}}</span>
        </div>
        <div class="assess-bottom">
					<span class="comment-item-star">
						<span class="real-star comment-stars-width5"></span>
					</span>
          <p class="assess-content">{{item.content}}</p>
          <p class="pay-date">购买日期：{{item.createtime}}        </p>
          <p class="product-type">颜色：爱巢 型号：标准号200*230cm            </p>
        </div>
        <div class="assess-btns-box">
          <div class="assess-btns">
            <a class="assess-like-btn" >
              <i class="assess-btns-icon btn-like-icon like-grey" >
              </i>
              <span class="assess-btns-num" >(0)</span>
              <i class="like" >+1</i>
            </a>
            <a class="assess-reply-btn"   href="javascript:void(0)">
              <i class="assess-btns-icon btn-no-reply-icon"></i>
              <span class="assess-btns-num">(0)</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="zdetail_cont3 mb">
      <div class="cont3_tit ">
        <a v-bind:class="{ selected: isActive,noselected:noselect}" @click="toggle_detail()" href="javascript:;"><span>图文详情</span></a>
        <a v-bind:class="{ noselected: isActive,selected:noselect}" @click="toggle_detail()" href="javascript:;"><span>配置详情</span></a>
      </div>
      <div class="des_con">
        <div class="cont3_det" v-if="showDetail">
          <!-- 图文详细 -->
          <div class="det det2"  v-for="item in productDetails" :key="item.id"><img v-bind:src="item.url" /></div>
        </div>
        <!-- 费用明细 -->
        <div class=" cont3_det zdetail_cont5" v-else>
          <div class="cont5_tit">费用明细</div>
          <div class="cont5_det">
            <span>保证金<i>¥800</i></span>
            <span>首付<i>¥0</i></span>
            <span>月利息<i>¥550</i></span>
            <span>月供<i>¥3300</i></span>
            <span>购置税<i>¥5500</i></span>
            <span>保险<i>¥1500</i></span>
            <span>贷款总额<i>¥85500</i></span>
          </div>
        </div>
      </div>
    </div>
    <buyCart/>
    <!--<section class="buy_cart_container">-->
        <!--<section @click="toggleCartList" class="cart_icon_num">-->
          <!--<div class="cart_icon_container" :class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}" ref="cartContainer">-->
              <!--<span v-if="totalNum" class="cart_list_length">-->
                  <!--{{totalNum}}-->
              <!--</span>-->
              <!--<svg class="cart_icon">-->
                <!--<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>-->
              <!--</svg>-->
          <!--</div>-->
          <!--<div class="cart_num">-->
            <!--<div>¥ {{totalPrice}}</div>-->
            <!--<div>配送费¥{{deliveryFee}}</div>-->
          <!--</div>-->
        <!--</section>-->
        <!--<section class="gotopay">-->
          <!--<router-link :to="{path:'/confirmOrder'}" class="gotopay_button_style"  >去结算</router-link>-->
        <!--</section>-->
      <!--</section>-->
  </div>
</template>

<script>
  import headTop from "src/components/header/head"
  import buyCart from "src/components/common/BuyCart"
  import axios from 'axios'
  import { currency } from '../../utils/currency'
  export default {
    name: "listCar",
    components:{
      carrousel:require('../../components/common/swiper.vue').default,
      headTop,
      buyCart
    },
    data(){
      return {
        totalPrice:'0',
        deliveryFee:'0',
        isActive: true,
        noselect: false,
        showDetail:true,
        emActive:true,
        radio: '1',
        productDetails:[],
        productBanners:[],
        productEvaluates:[],
        detail:'',
        radios:[{ label: '丐版', value:'1',isChecked: true},
                 {label: '中配',value:'2',isChecked: false},
                 { label: '天窗版',value:'3',isChecked: false},
        ],
        radiosColor:[{label: '黑色',value:'1',sChecked: true},
                       {label: '白色',value:'2',isChecked: false },
                       {label: '红色',value:'3',sChecked: false}],
        result:{
          id:{},count:{},title:{},  price:{},des:{},
        }
      }
    },

    computed:{
      totalNum : function () {
        let num = 0;
        return num;
      }
    },
    filters:{
      currency: currency
    },
    methods:{
      buy_cart_container :function () {

      },
      toggleCartList:function () {

      },
      receiveInCart:function () {

      },
      toggle_detail:function () {
          this.isActive=!this.isActive;
          this.noselect=!this.noselect;
          this.showDetail=!this.showDetail;
      },
      toggle_em:function () {
        console.log(this.em_active);
        this.em_active=!this.em_active;
      },
      check(index) {
        // 先取消所有选中项
        this.radios.forEach((item) => {
          item.isChecked = false;
        });
        //再设置当前点击项选中
        this.radio = this.radios[index].value;
        // 设置值，以供传递
        this.radios[index].isChecked = true;
      },
      checkColor(index) {
        // 先取消所有选中项
        this.radiosColor.forEach((item) => {
          item.isChecked = false;
        });
        //再设置当前点击项选中
        this.radio = this.radiosColor[index].value;
        // 设置值，以供传递
        this.radiosColor[index].isChecked = true;
      }

    },
    created:function () {
      axios.post('/api/pic-consumer-product/product',{
        code : this.$route.query.code,
        id: this.$route.query.id,
      }).then(response => {
           //console.log(response.data)
          /*this.code = response.data.code;*/
          /*document.write(response.data.result);*/
          //this.result = response.data.result;
          this.productBanners = response.data.productBanners;
          this.productEvaluates = response.data.productEvaluates;
          this.productDetails = response.data.productDetails;
          this.result= response.data;
          //this.result.title = response.data.title;
          //this.result.des = response.data.des;
          //alert(this.productImgs[0].url)
          //console.log(response.data.result);
        }).catch(err => {
          console.log(err);
        });
    }

  }
</script>

<style lang="scss" scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  /*汽车详情*/
  .banner{margin-top: 1.05rem;}
  .banner img{width: 100%;}
  .detail_des{padding: 0.2rem;border-bottom: solid 1px #f5f4f9;background: #FFFFFF;}
  .detail_des .left .ks{line-height: 100%;color: #363636;font-size: 0.3rem;font-weight: bold;}
  .detail_des  .left .des_des{font-size: 0.26rem;color: #999;line-height: 100%;margin-top: 0.2rem;}
  .detail_des .left .link{margin-top: 0.24rem;}
  .detail_des .left .link a{display: inline-block;padding:0 0.20rem;text-align: center;height: 0.34rem;line-height: 0.34rem;border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;font-size: 0.24rem;margin-right: 0.12rem;}
  .detail_des .right span{display: block;line-height: 0.4rem;color: #666;font-size: 0.22rem;text-align: right;}
  .detail_des .right em{display: block;line-height: 100%;color: #FA2F5D;font-size: 0.28rem;font-weight: bold;margin-top: 0.25rem;text-align: right;}
  .goods_price{font-size: 0.26rem;}
  .company_name{font-size: 0.26rem;display: inline-block;color: #888;margin-top:0.21rem;}
  .zdetail_cont4 .cont4_tit{line-height: 0.6rem;margin-top: 0.1rem;padding: 0 0.2rem;color: #4A4A4A;font-size: 0.25rem;}
  .zdetail_cont4 .cont4_det{padding: 0.3rem 0.2rem;background: #fff;}
  .zdetail_cont4 .cont4_det em{display: inline-block;width: 1.54rem;height: 0.6rem;line-height: 0.6rem;text-align: center;background: url(../../images/detail2.png) no-repeat center;background-size: 100%;color: #666;font-size: 0.25rem;margin-right: 0.2rem;margin-bottom: 0.2rem;}
  .zdetail_cont4 .cont4_det em.em_active{background: url(../../images/detail3.png) no-repeat center;background-size: 100%;color: #FA2F5D;}
  .zdetail_cont5 .cont5_tit{line-height: 0.6rem;margin-top: 0.1rem;padding: 0 0.2rem;color: #4A4A4A;font-size: 0.25rem;}
  .zdetail_cont5 .cont5_det{padding: 0.3rem 0.2rem;background: #fff;}
  .zdetail_cont5 .cont5_det span{display: inline-block;color: #4A4A4A;font-size: 0.22rem;line-height: 0.7rem;margin-right: 0.5rem;}
  .zdetail_cont5 .cont5_det span i{color: #fa2f5d;font-size: 0.28rem;}
  .zdetail_cont6 .cont6_tit{line-height: 0.6rem;margin-top: 0.1rem;padding: 0 0.2rem;color: #4A4A4A;font-size: 0.25rem;}
  .zdetail_cont6 .cont6_det{padding: 0 0.2rem;background: #fff;overflow: hidden;}
  .zdetail_cont6 .cont6_det span{display: inline-block;float: left;line-height: 1.15rem;color: #4A4A4A;font-size: 0.22rem;}
  .zdetail_cont6 .cont6_det i{display: inline-block;float: right;line-height: 1.15rem;color: #FA2F5D;font-size: 0.26rem;}
  .zdetail_btns{width: 5.78rem;margin:auto;margin-top: 0.38rem;height: 0.8rem;line-height: 0.8rem;text-align: center;background: #fa2f5d;border-radius: 0.4rem;margin-bottom: 1.88rem;}
  .zdetail_btns input{display: block;width: 100%;height: 100%;border: none;outline: none;background: transparent;color: #fff;font-size: 0.28rem;}
  .zdetail_cont2{padding: 0 0.2rem;height: 0.7rem;line-height: 0.7rem;background: #ee9b11;margin-top: 0.08rem;color: #fff;font-size: 0.22rem;}
  .detail_comments{text-align: center;margin-bottom: .2rem;}
  .assess-flat{padding: 0.1rem 0.2rem;font-size: 0.26rem;color: #666;background: #fff;margin: 0.1rem;}
  .user-portrait img{width: 0.7rem;height: 0.7rem;}
  .assess-wrapper{display: block;}
  .assess-top{height: 0.8rem;line-height: 0.8rem;text-align: left;}
  .user-name{font-size: 0.3rem;margin-left: 0.1rem;}
  .assess-date{float: right;}
  .comment-item-star{width: 100%;height: 0.5rem;display: block;text-align: left;}
  .real-star{display: inline-block;height: 11px;background: url(../../images/comment-star.png) repeat-x 0 0;background-size: 15px 22px;width: 75px;margin-top: 8px;}
  .real-star .comment-stars-width5{}
  .pay-date,.product-type{color: #999;text-align: left;font-size: 0.24rem;padding-top: 0.1rem;}
  .assess-bottom{padding-bottom: 0.2rem;border-bottom: 1px dashed #CFCFCF;}
  .assess-content{font-size: 0.24rem;text-align: left;}
  .assess-like-btn,.assess-reply-btn{font-size:.26rem;display:inline-block;padding:.1rem 0;position:relative;width:45%;text-align:center;border:1px solid #e0e0e0;border-radius:6px;-webkit-tap-highlight-color:transparent;margin:0 0.1rem}
  .assess-btns{padding:.2rem}
  .assess-btns-icon{display:inline-block;margin-right:6px;vertical-align:top;background:url(../../images/assess-btns-icon.png) 0 0 no-repeat;background-size:75px 15px}
  .assess-btns-num{line-height:.36rem;display:inline-block;color:#666;font-size:0.24rem;}
  .btn-like-icon{width:16px;height:16px;margin-right:0;margin-top:2px}
  .btn-no-reply-icon{width:16px;height:16px;margin-top:2px;margin-right:0;background-position:-32px 0}
  .like-grey{background-position:0 0}
  .like{display: none;}
  .goods_det{padding-bottom: 50px;}
  .goods_det .swiper-no-swiping{display: none;}
  .goods_det .selected{display: block;}
  .cont3_det .det2 img{width: 100%;}
  .zdetail_cont3 .cont3_tit{overflow: hidden;background: #fff;}
  .zdetail_cont3 .cont3_tit a{display: block;float: left;width: 50%;text-align: center;height: 0.7rem;line-height: 0.7rem;color: #666;font-size: 0.24rem;}
  .zdetail_cont3 .cont3_tit a.selected{color: #ec5566;}
  .zdetail_cont3 .cont3_tit a span{display: block;height: 100%;background: url(../../images/detail4.png) no-repeat right center;background-size: 0.02rem auto;font-size:0.24rem;}
  .zdetail_cont3 .cont3_tit a.selected{color: #ec5566;}
  .radio-box{
    display: inline-block;
    position: relative;
    height: 25px;
    line-height: 25px;
    margin-right: 5px;
  }
  .radio {
    display: inline-block;
    width: 1.54rem;
    height: 0.6rem;
    line-height: 0.6rem;
    vertical-align: middle;
    cursor: pointer;
    background: url(../../images/detail2.png) center ;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size:0.24rem;
    text-align: center;
  }
  .input-radio {
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 1.54rem;
    height: 0.6rem;
    line-height: 0.6rem;
    cursor: pointer;
    left: 0px;
    outline: none;
    -webkit-appearance: none;
  }
  .on {
    background: url(../../images/detail3.png) center;
    background-size: 100%;
  }
  .cont4_det label{
    display: inline-block;margin-right: 0.1rem;
    position: relative;
  }
  .banner img{width: 100%;vertical-align: middle;}
  .mb{margin-bottom: 2rem }

  /*购物车*/
  .buy_cart_container{
      position: fixed;
      background-color: #3d3d3f;
      bottom: 0;
      left: 0;
      z-index: 13;
      display: flex;
      @include wh(100%, 1rem);
      .cart_icon_num{
        flex: 1;
      .cart_icon_container{
            display: flex;
            background-color: #3d3d3f;
            position: absolute;
            padding: .1rem;
            border: 0.18rem solid #444;
            border-radius: 50%;
            left: .5rem;
            top:.1rem;
          .cart_icon{
            @include wh(.5rem, .5rem);
          }
          .cart_list_length{
            position: absolute;
            top: -.25rem;
            right: -.25rem;
            background-color: #ff461d;
            line-height: .7rem;
            text-align: center;
            border-radius: 50%;
            border: 0.025rem solid #ff461d;
            min-width: .7rem;
            height: .7rem;
          @include sc(.5rem, #fff);
            font-family: Helvetica Neue,Tahoma,Arial;
          }
      }
      .move_in_cart{
        animation: mymove .5s ease-in-out;
      }
      .cart_icon_activity{
        background-color: #3190e8;
      }
      .cart_num{
      @include ct;
        left: 3.5rem;

      div{
        color: #fff;
      }
      div:nth-of-type(1){
        font-size: .8rem;
        font-weight: bold;
        margin-bottom: .1rem;
      }
      div:nth-of-type(2){
        font-size: .4rem;
      }
      }
      }
      .gotopay{
        position: absolute;
        right: 0;
        background-color: #535356;
      @include wh(5rem, 100%);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      .gotopay_button_style{
      @include sc(rem, #fff);
        font-weight: bold;
      }
      }
      .gotopay_acitvity{
        background-color: #4cd964;
      }
  }
</style>
